<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>操作记录--${fns:getConfig('productName')}</title>
<link rel="stylesheet" href="${ctx}/styles/css/about.css">
<style>
.page {
	width: 100%;
	background: #F0F0F0 url('../../styles/images/operation/img/dian2.png') repeat-x;
}
.box{width:98%;}
.event_list{float:left;}
.event_year{border:none;}
</style>
</head>
<div class="box">
	<ul class="event_year"></ul>
	<ul class="event_list"></ul>
	<div class="clearfix"></div>
</div>
</div>
<div class="lld" style="display:none;width:90px;position:fixed;left:50%;top:200px;z-index:999;height:35px;line-height:35px;text-align:center;border:1px solid #906820;background:rgba(255,165,0,0.4);color:#000;">加载中...</div>
<script>
    $.ajax({  
        url: '${ctx}/operation/listInfo.do',  
        type: 'GET',  
        dataType: 'json',  
        error: null,  //错误执行方法    
        beforeSend:function(){$(".lld").show();},
        success: function(result){
        	$(".event_year").css({"border-bottom":"2px solid #DDD"});
        	$(".lld").hide();
        	//自定义result排序
        	var year = [];
        	var json = {};
        	for(var temp in result){year.push(temp);}
        	function sequence(a,b){return -(a - b);}
        	year.sort(sequence);
        	for(var i=0;i<year.length;i++)json[i]=result[year[i]];
        	
        	//构造时间轴
        	var lpk = 0;
        	for(var key in json){
        		//年份
        		$('.event_year').append('<li><label for="'+year[lpk]+'">'+year[lpk]+'</label></li>');
        		$('.event_list').append('<div class="lpk'+lpk+'"><h3 id="'+year[lpk]+'">'+year[lpk]+'</h3></div>'); 
        		
        		for(var j=0;j<json[key].length;j++){
        			var apphtml='';
        			for(var kk in json[key][j]){
        				apphtml+='<li><span>'+kk+'</span><p><span>'+json[key][j][kk]+'</span></p></li>';
        			}
        			$('.event_list .lpk'+lpk+'').append(apphtml);
        		}lpk++;
        	}
        	$('.event_year li').eq(0).addClass('current');
			
        	//时间轴点击事件
       		$('label').click(function() {
				$('.event_year>li').removeClass('current');
				$(this).parent('li').addClass('current');
				var year = $(this).attr('for');
				$('#' + year).parent().prevAll('div').slideUp(800);
				$('#' + year).parent().slideDown(800).nextAll('div').slideDown(800);
			}); 
        }     
    }); 
</script>
</body>
</html>